<!DOCTYPE html>
<!-- saved from url=(0045)https://demo.demohuo.top/jquery/27/2748/demo/ -->
<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<title>移动端的jQuery二级联动滑动选择插件mobile selector</title>
<link type="text/css" rel="stylesheet" href="./pulic/style.css">
</head>

<body>
<div class="slide-wapper">
  <div class="slide-item">
    <div class="console"></div>
    <div class="title2">二级模拟选择插件</div>
    <div class="title">二级城市联动选择</div>
    <input type="text" class="select-value" value="广东省" readonly="readonly" style="transform: translateY(0px);">
    <div class="title">二级非联动选择</div>
    <div class="select-input2">
      <input type="text" class="select-value2" value="秘密 吸引力法则" readonly="readonly" style="transform: translateY(0px);">
    </div>
    <div class="title">单级选择</div>
    <input type="text" class="select-value3" value="" readonly="readonly">
    <br>
    <br>
    <!-- 二级非联动选择 --> 
    <!--  <input type="text" class="select-value4" value="饿的方式度过 收到额外人" readonly="true" mpicker='picker4'> -->
    <pre>两级联动选择插件调用：
$('.select-value').mPicker({
    //级别
    level:2,
    //需要渲染的json，二级联动的需要嵌套子元素，有一定的json格式要求
    dataJson:dataJson,
    //true:联动
    Linkage:true,
    //显示行数
    rows:6,
    //默认值填充
    idDefault:true,
    //分割符号
    splitStr:'-',
    //头部代码
    header:'&lt;\div class="mPicker-header"&gt;两级联动选择插件&lt;\/div&gt;',
    confirm:function(){
        //更新json
        this.container.data('mPicker').updateData(level3);
        //console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
    },
    cancel:function(){
        //console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
    }
})
//返回的实例对象，
//包含showPicker,hide,updateData等方法
// var method= $('.select-value').data('mPicker');
// console.info(method)
// method.showPicker();
// method.hide(function(){
//     console.info(this)
// });
    </pre>
  </div>
</div>
<script src="./pulic/jquery.min.js"></script>
<script type="text/javascript" src="./pulic/index.js"></script>
<div class="mPicker hide"><div class="mPicker-mask hide"></div></div>

</body></html>